@mixin light {
  --ht-color-transparent-0: rgba(255, 255, 255, 0);
  --ht-color-transparent-80: rgba(255, 255, 255, 0.80);
  --ht-color-gray-100: #ffffff;
  --ht-color-gray-200: #f7f7f9;
  --ht-color-gray-250: #ebebed;
  --ht-color-gray-300: #e7e7e9;
  --ht-color-gray-350: #d1d1d5;
  --ht-color-gray-400: #a3a3a3;
  --ht-color-gray-500: #68696c;
  --ht-color-gray-800: #222222;
  --ht-color-gray-900: #0f0f10;
  --ht-color-gray-800-40: rgba(34, 34, 34, 0.40);
  --ht-color-gray-800-8: rgba(34, 34, 34, 0.08);
  --ht-color-gray-800-4: rgba(34, 34, 34, 0.04);
  --ht-color-accent-300: #5371ee;
  --ht-color-accent-350: #2e56fc;
  --ht-color-accent-400: #1a42e8;
  --ht-color-accent-500: #1535bc;
  --ht-color-accent-400-40: rgba(26, 66, 232, 0.40);
  --ht-color-notification-search: rgba(251, 233, 82, 0.80);
  --ht-color-notification-error: rgba(250, 77, 50, 0.20);
  --ht-color-notification-success: rgba(55, 188, 108, 0.20);
  --ht-color-notification-warning: rgba(251, 233, 82, 0.20);
  --ht-color-notification-informational: rgba(39, 194, 255, 0.20);
  --ht-common-accent: var(--ht-color-accent-400);
  --ht-common-background: var(--ht-color-gray-100);
  --ht-common-foreground: var(--ht-color-gray-800);
  --ht-common-border: var(--ht-color-gray-300);
  --ht-common-disabled: var(--ht-color-gray-400);
  --ht-common-read-only: var(--ht-color-gray-500);
  --ht-common-placeholder: var(--ht-color-gray-400);
  --ht-common-shadow: var(--ht-color-gray-800-8);
  --ht-common-background-secondary: var(--ht-color-gray-200);
  --ht-common-overlay: var(--ht-color-transparent-80);
  --ht-common-foreground-secondary: var(--ht-color-gray-500);
}

@mixin dark {
  --ht-color-transparent-0: rgba(0, 0, 0, 0);
  --ht-color-transparent-80: rgba(0, 0, 0, 0.80);
  --ht-color-gray-100: #050506;
  --ht-color-gray-200: #1e1e1f;
  --ht-color-gray-250: #282829;
  --ht-color-gray-300: #313132;
  --ht-color-gray-350: #404144;
  --ht-color-gray-400: #68696c;
  --ht-color-gray-500: #a3a3a3;
  --ht-color-gray-800: #c7c7c7;
  --ht-color-gray-900: #ffffff;
  --ht-color-gray-800-40: rgba(199, 199, 199, 0.40);
  --ht-color-gray-800-8: rgba(199, 199, 199, 0.16);
  --ht-color-gray-800-4: rgba(199, 199, 199, 0.12);
  --ht-color-accent-300: #2e56fc;
  --ht-color-accent-350: #5573f0;
  --ht-color-accent-400: #476af7;
  --ht-color-accent-500: #6180ff;
  --ht-color-accent-400-40: rgba(71, 106, 247, 0.40);
  --ht-color-notification-search: rgba(255, 231, 34, 0.30);
  --ht-color-notification-error: rgba(255, 42, 52, 0.30);
  --ht-color-notification-success: rgba(66, 190, 101, 0.30);
  --ht-color-notification-warning: rgba(241, 194, 28, 0.30);
  --ht-color-notification-informational: rgba(39, 194, 255, 0.30);
  --ht-common-accent: var(--ht-color-accent-400);
  --ht-common-background: var(--ht-color-gray-100);
  --ht-common-foreground: var(--ht-color-gray-800);
  --ht-common-border: var(--ht-color-gray-300);
  --ht-common-disabled: var(--ht-color-gray-400);
  --ht-common-read-only: var(--ht-color-gray-500);
  --ht-common-placeholder: var(--ht-color-gray-400);
  --ht-common-shadow: var(--ht-color-transparent-80);
  --ht-common-background-secondary: var(--ht-color-gray-200);
  --ht-common-overlay: var(--ht-color-transparent-80);
  --ht-common-foreground-secondary: var(--ht-color-gray-500);
}

@mixin theme {
  --ht-font-size: 14px;
  --ht-font-size-small: 12px;
  --ht-line-height: 20px;
  --ht-line-height-small: 18px;
  --ht-font-weight: 400;
  --ht-letter-spacing: 0;
  --ht-gap-size: 4px;
  --ht-icon-size: 16px;
  --ht-table-transition: 0.15s;
  --ht-border-color: var(--ht-common-border);
  --ht-accent-color: var(--ht-common-accent);
  --ht-foreground-color: var(--ht-common-foreground);
  --ht-foreground-secondary-color: var(--ht-common-foreground-secondary);
  --ht-background-color: var(--ht-common-background);
  --ht-placeholder-color: var(--ht-common-placeholder);
  --ht-read-only-color: var(--ht-common-read-only);
  --ht-disabled-color: var(--ht-common-disabled);
  --ht-shadow-color: var(--ht-common-shadow);
  --ht-shadow-x: 0;
  --ht-shadow-y: 8px;
  --ht-shadow-blur: 16px;
  --ht-bar-foreground-color: var(--ht-common-foreground);
  --ht-bar-background-color: var(--ht-common-background-secondary);
  --ht-bar-horizontal-padding: 16px;
  --ht-bar-vertical-padding: 8px;
  --ht-cell-horizontal-border-color: var(--ht-common-border);
  --ht-cell-vertical-border-color: var(--ht-common-border);
  --ht-wrapper-border-width: 0;
  --ht-wrapper-border-radius: 4px;
  --ht-wrapper-border-color: var(--ht-common-border);
  --ht-row-header-odd-background-color: var(--ht-common-background-secondary);
  --ht-row-header-even-background-color: var(--ht-common-background-secondary);
  --ht-row-cell-odd-background-color: var(--ht-color-transparent-0);
  --ht-row-cell-even-background-color: var(--ht-color-transparent-0);
  --ht-cell-horizontal-padding: 8px;
  --ht-cell-vertical-padding: 4px;
  --ht-cell-editor-border-width: 2px;
  --ht-cell-editor-border-color: var(--ht-common-accent);
  --ht-cell-editor-foreground-color: var(--ht-color-gray-900);
  --ht-cell-editor-background-color: var(--ht-common-background);
  --ht-cell-editor-shadow-blur-radius: 0;
  --ht-cell-editor-shadow-color: var(--ht-common-accent);
  --ht-cell-success-background-color: var(--ht-color-notification-success);
  --ht-cell-error-background-color: var(--ht-color-notification-error);
  --ht-cell-read-only-background-color: var(--ht-color-gray-800-4);
  --ht-cell-selection-border-color: var(--ht-common-accent);
  --ht-cell-selection-background-color: var(--ht-color-accent-350);
  --ht-cell-autofill-size: 6px;
  --ht-cell-autofill-hit-area-size: 14px;
  --ht-cell-autofill-border-width: 1px;
  --ht-cell-autofill-border-radius: 4px;
  --ht-cell-autofill-border-color: var(--ht-common-background);
  --ht-cell-autofill-background-color: var(--ht-common-accent);
  --ht-cell-autofill-fill-border-color: var(--ht-common-foreground);
  --ht-cell-mobile-handle-size: 12px;
  --ht-cell-mobile-handle-border-width: 1px;
  --ht-cell-mobile-handle-border-radius: 6px;
  --ht-cell-mobile-handle-border-color: var(--ht-common-accent);
  --ht-cell-mobile-handle-background-color: var(--ht-color-accent-400-40);
  --ht-resize-indicator-color: var(--ht-color-gray-800-40);
  --ht-move-backlight-color: var(--ht-color-gray-800-8);
  --ht-move-indicator-color: var(--ht-common-accent);
  --ht-hidden-indicator-color: var(--ht-color-gray-800-40);
  --ht-scrollbar-border-radius: 8px;
  --ht-scrollbar-track-color: var(--ht-common-background-secondary);
  --ht-scrollbar-thumb-color: var(--ht-color-gray-400);
  --ht-header-font-weight: var(--ht-font-weight);
  --ht-header-foreground-color: var(--ht-common-foreground);
  --ht-header-background-color: var(--ht-common-background-secondary);
  --ht-header-highlighted-shadow-size: 0;
  --ht-header-highlighted-foreground-color: var(--ht-color-gray-900);
  --ht-header-highlighted-background-color: var(--ht-color-gray-250);
  --ht-header-active-border-color: var(--ht-color-accent-350);
  --ht-header-active-foreground-color: var(--ht-common-background);
  --ht-header-active-background-color: var(--ht-common-accent);
  --ht-header-filter-background-color: var(--ht-color-notification-success);
  --ht-header-row-foreground-color: var(--ht-common-foreground);
  --ht-header-row-background-color: var(--ht-common-background-secondary);
  --ht-header-row-highlighted-foreground-color: var(--ht-color-gray-900);
  --ht-header-row-highlighted-background-color: var(--ht-color-gray-250);
  --ht-header-row-active-foreground-color: var(--ht-common-background);
  --ht-header-row-active-background-color: var(--ht-common-accent);
  --ht-checkbox-size: var(--ht-icon-size);
  --ht-checkbox-border-radius: 4px;
  --ht-checkbox-border-color: var(--ht-color-gray-350);
  --ht-checkbox-background-color: var(--ht-common-background);
  --ht-checkbox-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-focus-border-color: var(--ht-color-gray-350);
  --ht-checkbox-focus-background-color: var(--ht-common-background);
  --ht-checkbox-focus-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-focus-ring-color: var(--ht-common-accent);
  --ht-checkbox-disabled-border-color: var(--ht-common-border);
  --ht-checkbox-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-disabled-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-checked-border-color: var(--ht-color-accent-350);
  --ht-checkbox-checked-background-color: var(--ht-common-accent);
  --ht-checkbox-checked-icon-color: var(--ht-common-background);
  --ht-checkbox-checked-focus-border-color: var(--ht-common-background);
  --ht-checkbox-checked-focus-background-color: var(--ht-common-accent);
  --ht-checkbox-checked-focus-icon-color: var(--ht-common-background);
  --ht-checkbox-checked-disabled-border-color: var(--ht-common-border);
  --ht-checkbox-checked-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-checked-disabled-icon-color: var(--ht-common-disabled);
  --ht-checkbox-indeterminate-border-color: var(--ht-color-accent-350);
  --ht-checkbox-indeterminate-background-color: var(--ht-common-accent);
  --ht-checkbox-indeterminate-icon-color: var(--ht-common-background);
  --ht-checkbox-indeterminate-focus-border-color: var(--ht-color-gray-100);
  --ht-checkbox-indeterminate-focus-background-color: var(--ht-common-accent);
  --ht-checkbox-indeterminate-focus-icon-color: var(--ht-common-background);
  --ht-checkbox-indeterminate-disabled-border-color: var(--ht-common-border);
  --ht-checkbox-indeterminate-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-indeterminate-disabled-icon-color: var(--ht-common-disabled);
  --ht-radio-size: var(--ht-icon-size);
  --ht-radio-border-color: var(--ht-color-gray-350);
  --ht-radio-background-color: var(--ht-common-background);
  --ht-radio-icon-color: var(--ht-color-transparent-0);
  --ht-radio-focus-border-color: var(--ht-common-border);
  --ht-radio-focus-background-color: var(--ht-common-background);
  --ht-radio-focus-icon-color: var(--ht-color-transparent-0);
  --ht-radio-focus-ring-color: var(--ht-common-accent);
  --ht-radio-disabled-border-color: var(--ht-common-border);
  --ht-radio-disabled-background-color: var(--ht-color-gray-350);
  --ht-radio-disabled-icon-color: var(--ht-color-transparent-0);
  --ht-radio-checked-border-color: var(--ht-common-accent);
  --ht-radio-checked-background-color: var(--ht-common-background);
  --ht-radio-checked-icon-color: var(--ht-common-accent);
  --ht-radio-checked-focus-border-color: var(--ht-color-accent-350);
  --ht-radio-checked-focus-background-color: var(--ht-common-background);
  --ht-radio-checked-focus-icon-color: var(--ht-color-accent-350);
  --ht-radio-checked-disabled-border-color: var(--ht-common-border);
  --ht-radio-checked-disabled-background-color: var(--ht-color-gray-350);
  --ht-radio-checked-disabled-icon-color: var(--ht-common-disabled);
  --ht-icon-button-border-radius: 2px;
  --ht-icon-button-large-border-radius: 4px;
  --ht-icon-button-large-padding: 4px;
  --ht-icon-button-border-color: var(--ht-common-background-secondary);
  --ht-icon-button-background-color: var(--ht-common-background-secondary);
  --ht-icon-button-icon-color: var(--ht-color-gray-800-40);
  --ht-icon-button-hover-border-color: var(--ht-color-gray-300);
  --ht-icon-button-hover-background-color: var(--ht-color-gray-300);
  --ht-icon-button-hover-icon-color: var(--ht-color-gray-800-40);
  --ht-icon-button-active-border-color: var(--ht-color-accent-350);
  --ht-icon-button-active-background-color: var(--ht-common-accent);
  --ht-icon-button-active-icon-color: var(--ht-common-background);
  --ht-icon-button-active-hover-border-color: var(--ht-color-accent-350);
  --ht-icon-button-active-hover-background-color: var(--ht-color-accent-350);
  --ht-icon-button-active-hover-icon-color: var(--ht-common-background);
  --ht-collapse-button-border-radius: 4px;
  --ht-collapse-button-open-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-open-background-color: var(--ht-common-background);
  --ht-collapse-button-open-icon-color: var(--ht-color-gray-500);
  --ht-collapse-button-open-icon-active-color: var(--ht-color-gray-500);
  --ht-collapse-button-open-hover-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-open-hover-background-color: var(--ht-common-background-secondary);
  --ht-collapse-button-open-hover-icon-color: var(--ht-color-gray-500);
  --ht-collapse-button-open-hover-icon-active-color: var(--ht-color-gray-500);
  --ht-collapse-button-close-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-close-background-color: var(--ht-color-gray-250);
  --ht-collapse-button-close-icon-color: var(--ht-color-gray-500);
  --ht-collapse-button-close-icon-active-color: var(--ht-color-gray-500);
  --ht-collapse-button-close-hover-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-close-hover-background-color: var(--ht-color-gray-250);
  --ht-collapse-button-close-hover-icon-color: var(--ht-color-gray-500);
  --ht-collapse-button-close-hover-icon-active-color: var(--ht-color-gray-500);
  --ht-button-border-radius: 4px;
  --ht-button-horizontal-padding: 12px;
  --ht-button-vertical-padding: 6px;
  --ht-primary-button-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-foreground-color: var(--ht-common-background);
  --ht-primary-button-background-color: var(--ht-common-accent);
  --ht-primary-button-disabled-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-disabled-foreground-color: var(--ht-common-disabled);
  --ht-primary-button-disabled-background-color: var(--ht-color-gray-250);
  --ht-primary-button-hover-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-hover-foreground-color: var(--ht-common-background);
  --ht-primary-button-hover-background-color: var(--ht-color-accent-500);
  --ht-primary-button-focus-border-color: var(--ht-common-background);
  --ht-primary-button-focus-foreground-color: var(--ht-common-background);
  --ht-primary-button-focus-background-color: var(--ht-common-accent);
  --ht-secondary-button-border-color: var(--ht-common-border);
  --ht-secondary-button-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-background-color: var(--ht-common-background);
  --ht-secondary-button-disabled-border-color: var(--ht-common-border);
  --ht-secondary-button-disabled-foreground-color: var(--ht-common-disabled);
  --ht-secondary-button-disabled-background-color: var(--ht-color-gray-250);
  --ht-secondary-button-hover-border-color: var(--ht-common-border);
  --ht-secondary-button-hover-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-hover-background-color: var(--ht-common-border);
  --ht-secondary-button-focus-border-color: var(--ht-common-border);
  --ht-secondary-button-focus-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-focus-background-color: var(--ht-common-background);
  --ht-comments-textarea-horizontal-padding: 8px;
  --ht-comments-textarea-vertical-padding: 4px;
  --ht-comments-textarea-border-width: 1px;
  --ht-comments-textarea-border-color: var(--ht-color-transparent-0);
  --ht-comments-textarea-foreground-color: var(--ht-common-foreground);
  --ht-comments-textarea-background-color: var(--ht-common-background-secondary);
  --ht-comments-textarea-focus-border-width: 1px;
  --ht-comments-textarea-focus-border-color: var(--ht-common-accent);
  --ht-comments-textarea-focus-foreground-color: var(--ht-common-foreground);
  --ht-comments-textarea-focus-background-color: var(--ht-common-background);
  --ht-comments-indicator-size: 6px;
  --ht-comments-indicator-color: var(--ht-common-accent);
  --ht-license-horizontal-padding: var(--ht-bar-horizontal-padding);
  --ht-license-vertical-padding: var(--ht-bar-vertical-padding);
  --ht-license-foreground-color: var(--ht-common-foreground);
  --ht-license-background-color: var(--ht-common-background-secondary);
  --ht-link-color: var(--ht-color-accent-350);
  --ht-link-hover-color: var(--ht-color-accent-400);
  --ht-input-border-width: 1px;
  --ht-input-border-radius: var(--ht-checkbox-border-radius);
  --ht-input-horizontal-padding: 12px;
  --ht-input-vertical-padding: 6px;
  --ht-input-border-color: var(--ht-common-border);
  --ht-input-foreground-color: var(--ht-common-foreground);
  --ht-input-background-color: var(--ht-common-background-secondary);
  --ht-input-hover-border-color: var(--ht-common-border);
  --ht-input-hover-foreground-color: var(--ht-common-foreground);
  --ht-input-hover-background-color: var(--ht-common-background);
  --ht-input-disabled-border-color: var(--ht-common-border);
  --ht-input-disabled-foreground-color: var(--ht-common-disabled);
  --ht-input-disabled-background-color: var(--ht-color-gray-350);
  --ht-input-focus-border-color: var(--ht-common-accent);
  --ht-input-focus-foreground-color: var(--ht-common-foreground);
  --ht-input-focus-background-color: var(--ht-common-background);
  --ht-menu-border-width: 1px;
  --ht-menu-border-radius: 4px;
  --ht-menu-horizontal-padding: 0;
  --ht-menu-vertical-padding: 8px;
  --ht-menu-item-horizontal-padding: 12px;
  --ht-menu-item-vertical-padding: 4px;
  --ht-menu-border-color: var(--ht-common-border);
  --ht-menu-shadow-x: var(--ht-shadow-x);
  --ht-menu-shadow-y: var(--ht-shadow-y);
  --ht-menu-shadow-blur: var(--ht-shadow-blur);
  --ht-menu-shadow-color: var(--ht-common-shadow);
  --ht-menu-item-hover-color: var(--ht-color-gray-800-4);
  --ht-menu-item-active-color: var(--ht-color-gray-800-8);
  --ht-dialog-semi-transparent-background-color: var(--ht-common-overlay);
  --ht-dialog-solid-background-color: var(--ht-common-background);
  --ht-dialog-content-padding-horizontal: 8px;
  --ht-dialog-content-padding-vertical: 8px;
  --ht-dialog-content-border-radius: 8px;
  --ht-dialog-content-background-color: var(--ht-common-background-secondary);
  --ht-pagination-bar-foreground-color: var(--ht-common-foreground);
  --ht-pagination-bar-background-color: var(--ht-common-background-secondary);
  --ht-pagination-bar-horizontal-padding: var(--ht-bar-horizontal-padding);
  --ht-pagination-bar-vertical-padding: var(--ht-bar-vertical-padding);
}
